<template>
<div>
<el-card class="box-card" >
	<div slot="header" class="clearfix">
		<span>帮助手册</span>
	</div>
	<el-row>
	<el-form :inline="true" :model="form" >
		<el-form-item >
		    <el-input v-model="form.title" placeholder="标题"></el-input>
		</el-form-item>
		<el-form-item>
		    <el-button type="primary" @click="init">查询</el-button>
		</el-form-item>
		<el-form-item>
		    <el-button type="success" @click="add">创建</el-button>
		</el-form-item>
	</el-form>
	</el-row>

	<el-row>
	<el-table
	    :data="list.results"
	    :header-cell-style="{
			'background-color': '#f4f4f5',
		    'color': '#616161',    
		}"
	    border
	    style="width: 100%">
	    <el-table-column
	      prop="title"
	      label="标题"
	      >
	    </el-table-column>
	    <!-- <el-table-column
	      prop="content"
	      label="内容">
	    </el-table-column> -->
	    <el-table-column
	      prop="create_time"
	      label="创建时间"
	      >
	    </el-table-column>
	    <el-table-column
	      align="center"
	      label="操作">
	      	<template slot-scope="scope">
	      		<el-button type="success" size="mini" 
	      		icon="el-icon-edit" circle
	      		@click="edit(scope.row)">
	      		</el-button>
	      		<el-button type="danger" size="mini" 
	      		icon="el-icon-delete" circle
	      		@click="del(scope.row)">
	      		</el-button>
	      	</template>
	    </el-table-column>
	  </el-table>
	</el-row>

	<el-row class="text-right mt20 mb20">
		<el-pagination
		  @size-change="handleSizeChange"
		  @current-change="handleCurrentChange"
		  :current-page="pageNo"
		  :page-size="pageSize"
		  layout="total, sizes, prev, pager, next"
		  :total="list.totalRecord">
		</el-pagination>
	</el-row>
</el-card>

<el-dialog
  title="帮助手册"
  :visible.sync="dialogVisible"
  width="650px">
  
  	<el-form ref="form" :model="current" label-width="180px">

		<el-form-item label="标题："  >
			<el-input v-model="current.title" style="width:300px;"></el-input>
		</el-form-item>

		<!-- <el-form-item label="内容："  >
			<el-input type="textarea" v-model="current.content" style="width:400px;"></el-input>
		</el-form-item> -->


		<el-form-item label="上传帮助手册pdf文件：" >
			<el-upload
			  class="avatar-uploader"
			  :action="URL.upload"
			  :before-upload="beforeAvatarUpload"
			  :multiple="false"
			  :show-file-list="false"
			  :on-success="handleAvatarSuccess">
			  <el-button size="small" type="primary">点击上传</el-button>
			  <div slot="tip" class="el-upload__tip">只能上传pdf文件</div>
			</el-upload>
		</el-form-item>


	</el-form>

  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="save">保 存</el-button>
  </span>

  	<span slot="footer" class="dialog-footer">
	 	<pdf
	        v-for="i in numPages"
	        :key="i"
	        :src="current.content"
	        :page="i"
	        style="display: inline-block; width: 100%"
	    ></pdf>
    </span>

</el-dialog>


</div>
</template>

<script>

import { mapGetters } from 'vuex'
import Vue from 'vue'
import pdf from 'vue-pdf'

export default {
	
	name : 'helpList',
	
	data () {
		return {
		  	list : {},

		  	form : {},

		  	pageNo : 1,
		  	pageSize : 10,

		  	current : {},

		  	dialogVisible : false,

		  	loadingTask : null,

		  	numPages : [],
		}
	},

	props : {

	},

	components : {
		pdf,
	},

	computed : {
		...mapGetters([
			'URL',
			
		]),
	},

	methods : {
		init () {
			this.$http({
				fun : 'helpList',
				title : this.form.title,
				pageNo : this.pageNo,
				pageSize : this.pageSize,
				cb : res => {
					console.log(res);
					this.list = res;
				}
			});
		},

		add () {
			
			this.current = {};
			this.numPages = [];
			this.dialogVisible = true;
		},

		edit (item) {
			console.log(item);
			this.current = item;
			this.numPages = [];
			this.loadingTask = pdf.createLoadingTask(this.current.content);
			this.loadingTask.then(pdf => {

	            this.numPages = pdf.numPages;
	        });

			this.dialogVisible = true;
		},

		del (item) {
			this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
	          confirmButtonText: '确定',
	          cancelButtonText: '取消',
	          type: 'warning'
	        }).then(() => {

	        	this.$http({
	        		fun : 'createHelp',
	        		id : item.id,
	        		del_flag : 1,
	        		cb : res => {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.init();
	        		},
	        		err : res => {
	        			this.$message({
							type: 'error',
							message: '删除失败!'
						});
	        		}
	        	});
	          
	        }).catch(() => {
	                   
	        });
		},

		save () {
			this.$http({
				fun : 'createHelp',
				...this.current,
				cb : res => {
					console.log(res);
					this.$message.success('操作成功');
					this.dialogVisible = false;
					this.init();
				}
			})
		},

		handleSizeChange (val) {
			this.pageSize = val;
			this.init();
		},

		handleCurrentChange (val) {
			this.pageNo = val;
			this.init();
		},

		
		handleAvatarSuccess(res, file) {
			console.log(res);
			const pdfpath = '/gridfile' + res.data[0].path;
			Vue.set(this.current, 'content', pdfpath);

			this.loadingTask = pdf.createLoadingTask(pdfpath);
			this.loadingTask.then(pdf => {

	            this.numPages = pdf.numPages;
	        });

      	},


      	beforeAvatarUpload(file) {

			const isPDF = file.type === 'application/pdf';

			if (!isPDF) {
				this.$message.error('上传法律法规文件只能是 pdf 格式!');
			}
			
			return isPDF;
		},

	},

	watch : {
	    
	},

	mounted () {
		this.init();
	},

}
</script>

<style scoped>

</style>
